<template>
	<view>
		<view style="height: 321rpx;padding:82rpx 30rpx 0; border-radius: 0 0 40rpx 40rpx;background-color: #688517;">
			<view style="color: #fff; margin-bottom: 41rpx;margin-top: 80rpx;display: flex;align-items: center;">
			<!-- 	<image src="/static/waimai/返回@2x.png" style="margin-right: 21rpx; width: 18rpx;height: 32rpx;"
					@click="backTo()" mode="aspectFit"></image> -->
					<uni-icons type="arrowleft" size="20" @click="backTo" color="white"></uni-icons>
				<text style="font-size: 32rpx;margin-right: 380rpx;">外卖</text>
				<image src="/static/waimai/Location.png" style="width: 23rpx;height: 25rpx;" mode="aspectFit"></image>
				<text style="font-size: 24rpx;margin: 0 18rpx 0 9rpx;">李家沱地铁站</text>
				<!-- <uni-icons type="arrowright" size="12" color="white"></uni-icons> -->
				<image src="/static/waimai/right.png" style="width: 10rpx;height: 17rpx;" mode="aspectFit"></image>			
			</view>
			<view style="position: relative;">
				<image src="/static/index/search.png"
					style="width: 24rpx;height: 24rpx;position: absolute;top: 25rpx;left: 20rpx;" mode="aspectFit">
				</image>
				<input type="text" value="" placeholder-style="font-size:24rpx;color:#9EA9B7;" placeholder="请输入商品名称"
					style="padding-left: 64rpx; width: 630rpx;height: 72rpx;background-color: #F4F4F4;border-radius: 15rpx;" />
			</view>
			<view style="margin: 20rpx 0rpx 0rpx;">
				<swiper indicator-dots="true" indicator-color="#CBCCCE" indicator-active-color="#fff" circular="3000"
					autoplay="true" interval="3000">
					<swiper-item v-for="(item, index) in bannerList" :key="index" style="border-radius: 10rpx;">
						<image :src="item.thumb" style="width: 100%;height: 316rpx;"
						mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view style="margin: 260rpx 30rpx 0;">
			<image :src="bannerList[0].thumb"
				style="width: 690rpx;height: 248rpx;border-radius: 15rpx;" mode="aspectFill">
			</image>
		</view>
		<!-- 会员 -->
		<view style="margin: 30rpx 30rpx;display: flex;justify-content: space-between;">
			<navigator url="/pages/kaitong/kaitong">
				<image src="/static/meishi/kaitong.png" style="width: 338rpx;height: 143rpx;" mode="aspectFill">
				</image>
			</navigator>
			<navigator url="/pages/cz/cz">
				<image src="/static/meishi/chongzhi.png" style="width: 338rpx;height: 143rpx;" mode="aspectFill">
				</image>
			</navigator>
		</view>
		<text style="width: 100%;height: 20rpx;background-color: #0f0;"></text>
		<view style="margin: 0 30rpx;">
			<text style="font-size: 36rpx;color: #2A2B31;margin: 30rpx 0;">优选专区</text>
			<view class="youxuan">
				<image
					src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1423235161,778651989&fm=26&gp=0.jpg"
					style="margin-right:14rpx ;border-radius: 15rpx;" mode="aspectFit"></image>
				<image
					src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1423235161,778651989&fm=26&gp=0.jpg"
					style="border-radius: 15rpx;" mode="aspectFit"></image>
			</view>
		</view>
		<view>
			<view class="horizonal-tab">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
					<block v-for="(item, index) in tj" :key="index">
						<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
							{{ item.title }}
							<view class="select"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 内容区 -->
			<view style="margin: 0 30rpx;">
				<!-- 滑块视图 -->
				<scroll-view :scroll-y="true">
					<block>
						<view v-for="v in stores" :key="v.id" @click="toPage(v.id,v.juli)">
							<view
								style="margin-bottom: 25rpx; display: flex;flex-wrap: nowrap;box-sizing: border-box; width: 690rpx;padding: 20rpx 0 18rpx 20rpx; border: 1rpx solid #B4B4B4;border-radius: 14rpx;">
								<image src=""
									style="background-color: #5D5847; width: 206rpx;height: 206rpx;border-radius: 14rpx;margin-top: 10rpx;"
									mode="aspectFill"></image>
								<view style="margin-left: 18rpx;">
									<text class="title">{{v.title}}</text>
									<view
										style="display: flex;align-items: center;margin-top: 10rpx; flex-wrap: nowrap;font-size: 22rpx;color: #FF6F00;">
										<text style="margin-right: 5rpx;">{{v.score}}</text>
										<uni-rate v-model="v.score" :value="5" :size="12" color="#ADC3D0"
											activeColor="#FF6F00"></uni-rate>
										<text style="color: #666666;font-size: 22rpx;margin-left: 158rpx;">月售{{v.sailed}}</text>
									</view>
									<view style="font-size: 22rpx;color: #666666;margin-top: 5rpx;">
										<text>起送¥{{v.send_price}}</text>
										<text style="margin: 0 70rpx 21rpx 10rpx;">{{v.delivery_price == 0 ? '免配送费':('配送费'+ v.delivery_price+'元')}}</text>
										<text>{{v.delivery_time}}分钟</text>
										<text style="margin-left: 20rpx;">{{v.juli/1000}}km</text>
									</view>
									<view class="shop-tag">
										<text>新品发布</text>
									</view>
									<!-- <view class="shop-tag">
										<text style="margin-left: 6rpx;margin-right: 6rpx;" v-if="v.is_assign*1">支持自取</text>
									</view> -->
									<view class="shop-tag">
										<text v-if="v.is_recommend*1">热卖推荐</text>
									</view>
									<view class="full-reduction">
										
										<text class="full-reduction-tag">22减10</text>
										<text class="full-reduction-tag">48减20</text>
										<text class="full-reduction-tag">新品发布</text>
									</view>
								</view>
							</view>

						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<image src="/static/waimai/组%2017@2x.png"
			style="width: 116rpx;height: 116rpx;position: fixed;top: 90%;right: 0;" mode="aspectFit"></image>
	</view>
</template>

<script>
	import {
		Storage
	} from "@/static/libs/utils"
	export default {
		data() {
			return {
				value: 5,
				tj: [],
				tabIndex: 0 /* 选中标签栏的序列,默认显示第一个 */ ,
				contentList: [],
				bannerList: [],
				stores: [],
				token: '',
				productList: [],
				shopId: 0, //品质外卖商家id
				lat:'',
				lng:'',
				
			};
		},
		mounted() {

		},
		methods: {
			toggleTab(index) {
				this.tabIndex = index;
				this.shopId = this.tj[this.tabIndex].id;
				this.getContentList();	
			},
			tabChange(e) {
				// console.log(e);
				// this.tabIndex = e.detail.current;
			},
			onChange(e) {
				// console.log('rate发生改变:' + JSON.stringify(e));
			},
			detailClick() {
				uni.navigateTo({
					url: '/pages/detail/detail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toPage(id,distance) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}&distance=${distance}`
				})
			},
			// 首页配置信息
			getData() {
				
				//轮播图
				this.$request.get(
						`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=home&op=index&ta=index&from=wxapp&state=${this.token}&lat=${this.lat}&lng=${this.lng}&forceOauth=1&menufooter=1`
						)
					.then(res => {
						// console.log('139',res.data.message.message.slide);
						console.log(res);
						this.bannerList = res.data.message.message.slide;
					})
				// 门店列表
				this.$request.get(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=home&op=index&ta=store&from=wxapp&state=${this.token}&lat=${this.lat}&lng=${this.lng}&condition={"order":"distance","mode":"","dis":""}&page=1&psize=20&cid=0&child_id=0&forceLocation=1&scene=1001`
					).then(res => {
						console.log('门店列表',res)
					// console.log(res.data.message.message.stores)
					this.stores = res.data.message.message.stores
				});

			},
            //获取门店首页信息
			getIndexInfo() {
				this.$request.post(
					"/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=d1376a086d166069bdc8ac420275737b&controller=index.index_info", {
						communityId: 1,
						token: this.token
					}).then(res => {
					this.tj = res.data.category_list //获取品质外卖分类
					this.shopId = this.tj[this.tabIndex].id;
					this.getContentList();
				})
			},
			//获取品质外卖-商家信息
			getContentList() {
				var data = {
					token: this.token,
					lat: this.lat,
					lng: this.lng,
					cate_id: this.shopId,
					p: 1
				};
				this.$request.get(
					"http://sxk.scztf.com/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&controller=index.get_wm_goods",
					data).then(res => {
						console.log(res)
					// console.log('商铺信息为：',res);
					this.stores = res.data.data;
				})
			}
			
		},
		onLoad() {
			//获取token
			this.token = Storage.get('token');
			this.lat = Storage.get('latitude');
			this.lng = Storage.get('longitude');
			this.getData();
			this.getIndexInfo();
		}
	};
</script>

<style lang="scss" scoped>
	//设置轮播的指示点大小
	// .banner-swiper {
	// 	/deep/ .uni-swiper-dots {
	// 		// 指示点整个区域
	// 		bottom: 100rpx;
	// 	}

	// 	/deep/ .uni-swiper-dot {
	// 		// 指示点元素默认样式
	// 		width: 20rpx !important;
	// 		height: 4rpx !important;
	// 		border-radius: 2rpx;
	// 	}
	// }

	.select {
		display: none;
		width: 40rpx;
		height: 8rpx;
		background-color: #00c657;
	    margin: 0 auto;
		border-radius: 4rpx;
	}

	.title {
		width: 388rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.youxuan>image {
		width: 338rpx;
		height: 277rpx;
		border-radius: 15rpx;
	}

	.youxuan {
		margin-top: 30rpx;
		display: flex;
		flex-wrap: nowrap;
	}

	.horizonal-tab {
		font-size: 28rpx;
		color: #b4b4b4;
	}

	.horizonal-tab .active {
		color: #1b1b1b;
		font-size: 32rpx;

		.select {
			display: block;
			margin-top: -10rpx;
		}
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		cursor: pointer;
		height: 140rpx;
		line-height: 100rpx;
		overflow-x: hidden;
	}

	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 0 10rpx 49rpx 30rpx;
	}

	.shop-tag{
		display: inline-block;   
		margin: 10rpx 5rpx; 
		height: 38rpx;
		border: 1rpx solid #B4B4B4;
		border-radius: 8rpx;
		line-height: 38rpx;
		padding: 1rpx 4rpx;
		font-size: 20rpx;
		color: #1B1B1B;
	}
	
	.full-reduction{
		font-size: 20rpx;
		color: #1B1B1B;
		margin-top: 12rpx;
	}
	
	.full-reduction-tag{
		padding: 1rpx 4rpx;
		border: 1rpx solid #B4B4B4;
		border-radius: 8rpx;
		margin: 0 10rpx;
	}
</style>
